.login-box {
  position: absolute;
  width: 50%;
  text-align: center;
  top: 30%;
  left: 30%;
  background: #f6f6f6;
  box-shadow: 0 5px 10px #eee;
  border-radius: 1vmin;

  $them-color: #7265db;
  .title {
    padding: 3vmin;

    h1 {
      font-size: 2.5vmin;
      font-weight: 600;
    }
  }
  .box {
    padding: 2vmin;
    i {
      font-size: 1.7vmin;
      color: $them-color;
    }
    &::after {
      content: "";
      display: block;
      clear: both;
    }
    $BTN-WIDTH: 66%;
    .box-l {
      float: left;
      width: 50%;
      &.left {
        left: 0;
        text-align: center;
      }
      &.right {
        right: 0;
        h2 {
          font-size: 2.2vmin;
          padding: 1vmin;
          font-weight: 700;
        }
      }

      img {
        width: 30vmin;
      }
    }

    .ant-btn-primary {
      width: $BTN-WIDTH;
      margin-top: 1.2vmin;
      background-color: $them-color;
      border-color: $them-color;
    }
    .ant-space {
      width: $BTN-WIDTH;
      margin-bottom: 1.2vmin;
      border-radius: 0.5vmin;
      border: 1px solid $them-color;
    }
    .ant-input-affix-wrapper {
      border-radius: 0.5vmin;
    }
  }
  .bottom {
    color: #666;
    font-size: 1.4vmin;
    padding: 1vmin;
    img {
      width: 8%;
    }
  }
}
@media screen and (max-with: 900px) {
  .box-l {
    width: 80%;
  }
}

.logo {
  text-align: left;
  font-size: 4.5vmin;
  font-weight: 700;
  font-style: italic;
  color: white;
  padding: 5vmin;

  img {
    width: 6vmin;
    vertical-align: bottom;
  }
}
